<script>
import {findOrderDetailListByPage} from "@/api/order";

export default {
  name: "PatientAppointment",
  data() {
    return {
      tableData:[],
      userId: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).userId : null,
      workDate: null,
      status: null,
      statusList: [{value: '1', name: '待叫号'}, {value: '2', name: '已叫号'}],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: true,
    }
  },
  created() {
      this.workDate='2024-02-26';
      this.load();
  },
  methods: {
    load() {
      let params={
        userId:this.userId,
        workDate:this.workDate,
        status:this.status,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }
      findOrderDetailListByPage(params).then(res=>{
        this.tableData = res.data.records;
        console.log(this.tableData)
        this.loading = false;
        this.total = res.data.total;
      })
    },
    reset(){

    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.load();
    },
    getCurrentDate(){
      let date=new Date();
      let year=date.getFullYear();
      let month=date.getMonth()+1<10 ?'0'+(date.getMonth()+1):date.getMonth()+1;
      let day=date.getDate()<10 ?'0'+date.getDate():date.getDate();
      return year+'-'+month+'-'+day;
    },
    headerBg({row,rowIndex}){
      if(rowIndex==0){
        return 'headerBgClass';
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="search" style="margin-bottom: 10px">
      <el-date-picker type="date" v-model="workDate" format="yyyy年MM月dd日" value-format="yyyy-MM-dd"
                      placeholder="请选择日期" class="ml-5" clearable></el-date-picker>
      <el-select v-model="status" clearable placeholder="请选择操作类型" style=" margin-left: 5px;width:160px">
        <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
      <el-button type="warning" style="margin-left: 5px" @click="reset">重置</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData"
                border stripe
                v-loading="loading"
                max-height="550"
                :header-cell-class-name="headerBg"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255,225,255, 0.1)"
      >
  <el-table-column prop="orderNo" label="预约单号" align="center" :show-overflow-tooltip="true" width="200px"></el-table-column>
  <el-table-column prop="patient.user.userName" label="患者姓名" align="center" width="100px"></el-table-column>
        <el-table-column  label="患者头像" align="center" width="100px">
          <template slot-scope="scope">
            <div style="align-items: center">
              <el-image style="width:40px;height:40px;border-radius: 50%" v-if="scope.row.patient.user.avatar" :src="scope.row.patient.user.avatar" :preview-src-list="[scope.row.patient.user.avatar]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column  label="性别" align="center" width="80px">
          <template slot-scope="scope">
            <i v-if="scope.row.patient.user.sex=='0'" class="el-icon-male"></i>
            <i v-else class="el-icon-female"></i>
          </template>
        </el-table-column>
        <el-table-column prop="patient.birthDate" label="出生日期" align="center" width="130px"></el-table-column>
        <el-table-column prop="patient.user.phonenumber" label="手机号码" align="center" width="130px"></el-table-column>
        <el-table-column  label="预约时间" align="center" width="170px">
          <template slot-scope="scope">
            {{scope.row.appointmentScheduler.workDate}}&ensp;{{scope.row.appointmentTime}}
          </template>
        </el-table-column>
        <el-table-column  label="状态" align="center" width="150px">
          <template slot-scope="scope">
           {{scope.row.status=='1' ?'待叫号':'已叫号'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="215px">
          <template slot-scope="scope">
            <el-button type="info" v-if="scope.row.status==='2' && scope.row.certificateNo ==null">填写诊断书</el-button>
            <el-button type="warning" v-if="scope.row.status==='2' && scope.row.certificateNo !=null">查看诊断书</el-button>
            <el-button type="success" v-if="scope.row.status==='1'" >叫号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding:10px 0px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>